<template>
	<view class="buyButton">
		<view class="buyButton_option1">
			<view class="buyButton_option1_l">
				<view class="buyButton_option1_l_home">
					<up-icon name="home" size="20"></up-icon>
					首页
				</view>
				<view class="buyButton_option1_l_shopping">
					<up-badge :type="type" max="99" :value="cartStore.$state.badge" v-if="cartStore.$state.badge > 0"></up-badge>
					<up-icon name="shopping-cart" size="20"></up-icon>
					购物车
				</view>
			</view>
		</view>
		<view class="buyButton_option2">
			<view class="buyButton_option1_r">
				<view class="buyButton_option1_r_addShopping">
					<up-button text="加入购物车" color="black" size="large" @click="add"></up-button>
				</view>
				<view class="buyButton_option1_r_addBuy">
					<up-button text="立即购买" color="red" size="large"></up-button>
				</view>
			</view>
		</view>
	</view>
	<view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script setup>
import { computed, onMounted, reactive, ref, watchEffect, provide } from 'vue';
import useCartStore from '../../store/index.js';
import { AddShoppingCart, GetShoppingCart } from '../../apis/api.js';

const cartStore = useCartStore();

const uToastRef = ref(null);
// 使用 ref 创建响应式数据
const type = ref('warning');

const porps = defineProps({
	data: Object
});

console.log(porps.data);

const toast = reactive({
	type: '',
	message: ''
});

const data = reactive({
	product_id: '',
	user_id: '',
	product: ''
});

watchEffect(() => {
	// 通过 id 获取用户信息
	uni.getStorage({
		key: 'userId',
		success: (res) => {
			data.user_id = res.data;
			console.log('获取的 userId 为：', data.user_id);
			cartStore.initBadge(data.user_id);
		},
		fail: (error) => {
			console.error('获取 userId 失败：', error);
		}
	});
});

function refreshBadge() {
	cartStore.initBadge(data.user_id);
}

// 计算属性，用于计算购物车中商品的数量
const totalGoods = computed(() => {
	return data.badge;
});

// 加入购物车时，更新角标和 vuex 中的 badge 数量
const add = () => {
	watchEffect(() => {
		AddShoppingCart({
			user_id: data.user_id,
			product_id: porps.data.productInfo[0].product_id,
			quantity: porps.data.number,
			price: porps.data.productInfo[0].price,
			description: porps.data.productInfo[0].description,
			product_name: porps.data.productInfo[0].product_name,
			image_url: porps.data.productInfo[0].image_url,
			inventory: porps.data.productInfo[0].inventory
		}).then((res) => {
			if (res.msgType == 8000) {
				// 弹窗显示登录成功消息
				toast.type = 'success';
				toast.message = res.msg;
				uToastRef.value.show({ type: toast.type, message: toast.message });
				cartStore.initBadge(data.user_id);
				
			} else {
				toast.message = res.msg;
				uToastRef.value.show({ type: toast.type, message: toast.message });
			}
			console.log(res);
		});
		cartStore.initBadge(data.user_id);
	});
};


</script>

<style lang="less" scoped>
.buyButton {
	height: 100rpx;
	width: 100%;
	border: 2rpx solid #7d7d7d;
	position: fixed;
	bottom: 0;
	display: flex;
	align-items: center;
	box-sizing: border-box;

	.buyButton_option1 {
		width: 30%;
		.buyButton_option1_l {
			display: flex;
			justify-content: space-around;
			.buyButton_option1_l_home,
			.buyButton_option1_l_shopping {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 15px;
			}
		}
	}
	.buyButton_option2 {
		width: 70%;
		.buyButton_option1_r {
			display: flex;
		}
		.buyButton_option1_r_addShopping {
			width: 50%;
		}
		.buyButton_option1_r_addBuy {
			width: 50%;
		}
	}
}
</style>
